<style>
  .mid{
    /*background-color: #3374be;*/
    background-image: url("../assets/login.jpg");
    background-size:cover;

    /*background-color: #cfeace;*/
    height:100%;
    border: 1px solid #00457b;
    padding: 8px;
    font-size: .85em;
  }
  .login-top{
    padding: 5px;
    left: 10%;

  }
  .login-logo{
    float: right;
    padding-right: 20px;
    border-right: 1px solid #00457b;
  }
  .login-text{
    padding-left: 20px;
    color: #04489a;
    /*width: 100%;*/
    height: 60px;
    line-height: 60px;
    font-size: 2.85em;
  }
  .login-text-en{
    padding-left: 20px;
    color: #000000;
    /*width: 100%;*/
    /*height: 60px;*/
    /*line-height: 60px;*/
    font-size: 0.85em;
  }
</style>
<template>
  <div>
    <Row class="login-top">
      <Col span="4">
        <img src="../assets/login-logo.png" class="login-logo" >
      </Col>
      <Col span="20">
        <ul>
          <li class="login-text">智能流媒体在线平台</li>
          <li class="login-text-en">SMART STREAM ONLINE</li>
        </ul>
      </Col>
    </Row>
    <Row class="mid">
      <Form ref="formLogin" :model="userInfo" :rules="formLoginRules" class="card-box" style="margin-bottom: 80px;margin-top: 80px;"
            @submit.prevent="handleSubmit('formLogin')">
        <Form-item class="formLogin-title">
          <h3>用户登录</h3>
        </Form-item>
        <Form-item prop="name">
          <Input type="text" v-model="userInfo.name" placeholder="账号">
          <Icon type="ios-person-outline" slot="prepend"></Icon>
          </Input>
        </Form-item>
        <Form-item prop="pwd">
          <Input type="password" v-model="userInfo.pwd" placeholder="密码">
          <Icon type="ios-locked-outline" slot="prepend"></Icon>
          </Input>
        </Form-item>
        <Form-item prop="captcha" style="margin-bottom: 0px;">
          <Row>
            <Col :span="10">
            <Input type="text" v-model="userInfo.captcha"
                   placeholder="验证码" @on-enter="handleSubmit('formLogin')">
            <Icon type="ios-locked-outline" slot="prepend"></Icon>
            </Input>
            </Col>
            <Col :span="14" >
            <a href="javascript:;" @click.prevent="RESET_CAPTCHA">
              <img :src="captchaUrl"/>
            </a>
            </Col>
          </Row>
        </Form-item>
        <Form-item class="login-no-bottom">
          <Row>
            <Col :xs="{ span: 4, offset: 6 }">
            <i-button type="primary" @click="handleSubmit('formLogin')">登录</i-button>
            </Col>
            <Col :xs="{ span: 4, offset: 6 }">
            <Button type="primary" @click="handleReset('formLogin')">重置</Button>
            </Col>
          </Row>
        </Form-item>
      </Form>
    </Row>
    <br>
    <Row type="flex" justify="center" class="code-row-bg">
      <p >Onstream 视频处理专家</p>
    </Row>

  </div>
</template>

<script>
  import {mapMutations, mapGetters, mapState} from 'vuex'
  import api from '../api'
  import {setStore, getStore, Encrypt, Decrypt} from'../libs/util'
  import CryptoJS from "crypto-js"

  export default {
    components: {},
    data  () {
      return {
        userInfo: {
          name: '',
          pwd: '',
          captcha: '',
          captchaid: '',
          remember: []
        },
        formLoginRules: {
          name: [
            {required: true, message: '请填写用户名', trigger: 'blur'}
          ],
          pwd: [
            {required: true, message: '请填写密码', trigger: 'blur'},
            {type: 'string', min: 6, message: '密码长度不能小于6位', trigger: 'blur'}
          ],
          captcha: [
            {required: true, message: '请填写验证码', trigger: 'blur'},
            {type: 'string', min: 6, max: 6, message: '长度6位', trigger: 'blur'}
          ]
        }
      }
    },
    computed: {
      ...mapState(['isLogin', 'captchaUrl', 'cptId', 'msg'])
    },
    methods: {
      ...mapMutations(['SET_CAPTCHA', 'RESET_CAPTCHA', 'SET_MSG', 'SET_TOKEN', 'SET_MENUNEED', 'SET_HEADERNEED', 'SET_ISLOGINPAGE']),
      handleReset (name) {
        this.$refs[name].resetFields();
      },
      handleSubmit (name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            this.userInfo.captchaid = this.cptId
            api.login(this.userInfo).then(response => {
              let code = response.data.code
              let msg = response.data.message

              this.SET_MSG(msg)
              if (code !== 0) {
                this.$Message.error(msg)
                this.getCpt()
                return
              }
              this.$Message.success(msg);
              setStore('token', response.data.token)
              this.SET_TOKEN(response.data.token)
              this.$router.replace({path: '/'})
            }, err => {
              this.getCpt()
              this.$Message.error(err)
            })
          } else {
            this.getCpt()
            this.$Message.error('表单验证失败!');
          }
        })
      },
      getCpt(){
        api.getCpt().then(res => {
          this.SET_CAPTCHA({cptId: res.data.cptId, captchaUrl: res.data.url})
        }, err => {
          this.$Notice.error({
            top: 100,
            title: '系统错误',
            desc: this.msg
          });
        })
      }
    },
    created () {
      this.SET_HEADERNEED(false)
      this.SET_MENUNEED(false)
      this.SET_ISLOGINPAGE(true)
      this.getCpt()
    },
    beforeDestroy () {
      this.SET_MENUNEED(true)
      this.SET_HEADERNEED(true)
      this.SET_ISLOGINPAGE(false)
    },
  }
</script>
<style>
  .card-box {
    padding: 20px;
    /*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    background-clip: padding-box;
    margin-bottom: 20px;
    background-color: #F9FAFC;
    margin: 180px auto;
    width: 400px;
    border: 2px solid #8492A6;
  }

  .title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
  }

  .formLogin-title {
    text-align: center;
    font-seze: 28px;
  }

  .formLogin-title h3 {
    font-size: 18px;
  }

  .login-no-bottom {
    margin-bottom: 10px;
  }


</style>
